<template>
    <div class="barChart" ref="barchart"></div>
</template>

<script>
import {getBarData} from '@/api/home'
import * as echarts from 'echarts'
export default {
    name:'BarChart',
    data(){
        return {
            barDataList:[]
        }
    },
    methods:{
        getData(){
            getBarData().then(res => {
                this.barDataList = res.data
                this.draw()
            })
        },
        draw(){
            let myChart = echarts.init(this.$refs.barchart)
            // 指定图表的配置项和数据
            let option = {
                legend: {},
                tooltip: {},
                dataset: {
                    source: this.barDataList
                },
                xAxis: { type: 'category' },
                yAxis: {},
                color:['#93ce7c', '#4cb9d8'],
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar' }, { type: 'bar' }]
            };
             // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        }
    },
    mounted(){
        this.getData()
    }
}
</script>

<style>
.barChart{
    width: 100%;
    height: 100%;
}
</style>